<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap"
      rel="stylesheet"
    />
    <title>IMAGE FILTER</title>
    <link rel="stylesheet" href="../assets/css/Filterable_Image_Gallery.css" />
  </head>
  <body>
    <section>
      <ul>
        <li class="list active" data-filter="all">All</li>
        <li class="list" data-filter="mobile">Mobile</li>
        <li class="list" data-filter="camera">Camera</li>
        <li class="list" data-filter="watch">Watch</li>
        <li class="list" data-filter="shoe">Shoe</li>
        <li class="list" data-filter="headphone">Headphone</li>
      </ul>
      <!-- add all images block wise -->
      <div class="product">
        <div class="itembox" data-item="mobile">
          <img src="../assets/Images/Filterable_Image_Gallery/mobile1.jpg" alt="" />
        </div>
        <div class="itembox" data-item="camera">
          <img src="../assets/Images/Filterable_Image_Gallery/camera1.jpg" alt="" />
        </div>
        <div class="itembox" data-item="watch">
          <img src="../assets/Images/Filterable_Image_Gallery/watch1.jpg" alt="" />
        </div>
        <div class="itembox" data-item="shoe">
          <img src="../assets/Images/Filterable_Image_Gallery/shoe1.jpg" alt="" />
        </div>
        <div class="itembox" data-item="headphone">
          <img src="../assets/Images/Filterable_Image_Gallery/headphone1.jpg" alt="" />
        </div>

        <div class="itembox" data-item="mobile">
          <img src="../assets/Images/Filterable_Image_Gallery/mobile2.jpg" alt="" />
        </div>
        <div class="itembox" data-item="camera">
          <img src="../assets/Images/Filterable_Image_Gallery/camera2.jpg" alt="" />
        </div>
        <div class="itembox" data-item="watch">
          <img src="../assets/Images/Filterable_Image_Gallery/watch2.jpg" alt="" />
        </div>
        <div class="itembox" data-item="shoe">
          <img src="../assets/Images/Filterable_Image_Gallery/shoe2.jpg" alt="" />
        </div>
        <div class="itembox" data-item="headphone">
          <img src="../assets/Images/Filterable_Image_Gallery/headphone2.jpg" alt="" />
        </div>

        <div class="itembox" data-item="mobile">
          <img src="../assets/Images/Filterable_Image_Gallery/mobile3.jpg" alt="" />
        </div>
        <div class="itembox" data-item="camera">
          <img src="../assets/Images/Filterable_Image_Gallery/camera3.jpg" alt="" />
        </div>
        <div class="itembox" data-item="watch">
          <img src="../assets/Images/Filterable_Image_Gallery/watch3.jpg" alt="" />
        </div>
        <div class="itembox" data-item="shoe">
          <img src="../assets/Images/Filterable_Image_Gallery/shoe3.jpg" alt="" />
        </div>
        <div class="itembox" data-item="headphone">
          <img src="../assets/Images/Filterable_Image_Gallery/headphone3.jpg" alt="" />
        </div>

        <div class="itembox" data-item="mobile">
          <img src="../assets/Images/Filterable_Image_Gallery/mobile4.jpg" alt="" />
        </div>
        <div class="itembox" data-item="camera">
          <img src="../assets/Images/Filterable_Image_Gallery/camera4.jpg" alt="" />
        </div>
        <div class="itembox" data-item="watch">
          <img src="../assets/Images/Filterable_Image_Gallery/watch4.jpg" alt="" />
        </div>
        <div class="itembox" data-item="shoe">
          <img src="../assets/Images/Filterable_Image_Gallery/shoe4.jpg" alt="" />
        </div>
        <div class="itembox" data-item="headphone">
          <img src="../assets/Images/Filterable_Image_Gallery/headphone4.jpg" alt="" />
        </div>

        <div class="itembox" data-item="mobile">
          <img src="../assets/Images/Filterable_Image_Gallery/mobile5.jpg" alt="" />
        </div>
        <div class="itembox" data-item="camera">
          <img src="../assets/Images/Filterable_Image_Gallery/camera5.jpg" alt="" />
        </div>
        <div class="itembox" data-item="watch">
          <img src="../assets/Images/Filterable_Image_Gallery/watch5.jpg" alt="" />
        </div>
        <div class="itembox" data-item="headphone">
          <img src="../assets/Images/Filterable_Image_Gallery/headphone5.jpg" alt="" />
        </div>

        <div class="itembox" data-item="mobile">
          <img src="../assets/Images/Filterable_Image_Gallery/mobile6.jpg" alt="" />
        </div>
        <div class="itembox" data-item="watch">
          <img src="../assets/Images/Filterable_Image_Gallery/watch6.jpg" alt="" />
        </div>
        <div class="itembox" data-item="headphone">
          <img src="../assets/Images/Filterable_Image_Gallery/headphone6.jpg" alt="" />
        </div>

   
        <div class="itembox" data-item="headphone">
          <img src="../assets/Images/Filterable_Image_Gallery/headphone7.jpg" alt="" />
        </div>

       
    </section>

    <script src="../assets/js/Filterable_Image_Gallery.js"></script>
  </body>
</html>

  
  
